<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted,ref } from 'vue'
onMounted(() => {
  console.log(window.innerWidth)
  console.log(window.innerHeight)
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
  var myChart2 = echarts.init(document.getElementById('main2'));
  // 绘制图表
  myChart2.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
  fitScreen()
})
let screen = ref() 
const fitScreen=()=>{

onMounted(() => {
  screen.value.style.transform = `scale(${getScale()})`
})
//监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()})`
}
//定义大屏缩放比例，假设当前设计稿是 1920 * 1080(宽高比16:9)
const getScale = (w = 1500, h = 800) => {
  const ww = window.innerWidth / w //Window.innerWidth获取窗口的视口宽度，宽度缩放比
  const wh = window.innerHeight / h //window.innerHeight获取窗口的视口高度，高度缩放比
  //如果当前视口宽度变小或者视口高度变大，就按照宽度的缩放比例缩放，上下会有留白
  //如果当前视口宽度变大或者视口高度变小，就按照高度的缩放比例缩放，左右会有留白
  return ww < wh ? ww : wh
}

}
</script>

<template>
  <div class="screen" ref="screen">
    <div class="wrap">
      <div id="main"></div>
      <div id="main2"></div>
    </div>
  </div>
 
</template>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height:100%;
  display: flex;
  justify-content: space-between;
  background-color:rgba(grey,0.3);
  box-sizing:border-box;
  padding:40px;
}
.screen {
    position: fixed;
    box-sizing:border-box;
    width: 1500px;
    height: 800px;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin:auto;
    
  }

#main2,
#main {
  width: 500px;
  height: 500px;
  background-color:#fff;
}

</style>
